<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>学业测评</span>
      </div>
    </template>
    <el-form
      ref="ruleFormRef"
      inline
      label-width="120px"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item>
        <el-input
          style="width: 300px"
          v-model="pageData.keywords"
          placeholder="请输入标识/手机号"
          clearable
          @clear="getJudgeList"
        >
          <template #append>
            <el-button type="primary" @click="getJudgeList">搜索</el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="pageData.pid"
          placeholder="省份"
          clearable
          @change="getJudgeList"
        >
          <el-option
            v-for="item in province"
            :key="item.val"
            :label="item.name"
            :value="item.val"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item>
				<el-select v-model="pageData.region" placeholder="测评项目">
					<el-option label="Zone one" value="shanghai" />
					<el-option label="Zone two" value="beijing" />
				</el-select>
			</el-form-item> -->
    </el-form>
    <el-table
      :data="judgeListArr"
      style="width: 100%"
      class="margintop"
      v-loading="isLoading"
      :header-cell-style="{ 'border-bottom': 'none' }"
      :header-row-style="{ height: '60px' }"
      :cell-style="{ height: '60px', 'border-bottom': 'none' }"
      stripe
    >
      <el-table-column prop="province" width="80" label="省份" />
      <el-table-column prop="name" width="100" label="姓名" />
      <el-table-column label="性别" width="80">
        <template #default="scope">
          <el-icon v-if="scope.row.sex == 1" color="#fc56a5" size="20">
            <Female />
          </el-icon>
          <el-icon v-else color="#004cf7" size="20">
            <Male />
          </el-icon>
        </template>
      </el-table-column>
      <el-table-column prop="s_school" width="250" label="学校" />
      <el-table-column prop="member_id" label="会员卡号" />
      <!-- <el-table-column prop="type" label="项目" /> -->
      <el-table-column prop="date" width="160" label="测评时间" />
      <!-- <el-table-column prop="type" width="60" label="用时" /> -->
      <el-table-column fixed="right" label="操作" width="150" align="center">
        <template #default="scope">
          <el-tooltip
            class="box-item"
            effect="dark"
            content="下载报告"
            placement="top"
          >
            <el-icon
              size="22"
              style="cursor: pointer"
              @click="onClickDownloadRef(scope.row)"
            >
              <Download />
            </el-icon>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="right" style="margin-top: 20px">
      <el-config-provider :locale="zhCn">
        <el-pagination
          v-model:current-page="pageData.page"
          v-model:page-size="pageData.pageSize"
          :page-sizes="[10, 20, 30]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageData.total"
          @size-change="getJudgeList"
          @current-change="getJudgeList"
        />
      </el-config-provider>
    </div>
  </el-card>
  <downloadResult ref="downloadRef"></downloadResult>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { judgeList, userListFilter } from '@/api/manage/manage.js';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import downloadResult from './module/downloadResult.vue';

const downloadRef = ref(null);

const pageData = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
});
const province = ref([]); // 省份

const isLoading = ref(false); // 是否正在加载
const judgeListArr = ref([]); // 测评列表数组

getJudgeList();
// 获取测评列表
function getJudgeList() {
  Object.keys(pageData).forEach(function (key) {
    if (pageData[key] === '') {
      delete pageData[key];
    }
  });

  isLoading.value = true;
  judgeList(pageData)
    .then((res) => {
      isLoading.value = false;
      judgeListArr.value = res.data.data;
      pageData.total = res.data.total;
    })
    .catch(() => {
      isLoading.value = false;
    });
}

userSearch();
// 筛选条件
function userSearch() {
  userListFilter().then((res) => {
    province.value = res.data[2].data;
  });
}

// 点击下载报告
function onClickDownloadRef(val) {
  downloadRef.value.openChange(val);
}
</script>
<style lang="scss" scoped>
::v-deep(.el-form--inline .el-form-item) {
  margin-right: 7px;
}

::v-deep(.el-form-item--default) {
  margin-bottom: 4px;
}

.box-card {
  margin: 20px;

  .card-header {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    padding: 10px;
  }
}
</style>
